<script setup lang="ts">
import { ref } from 'vue';
import designer from '@form-create/designer';
import isTools from '@/utils/isTools';

defineExpose({ setFormCreate, getFormData, clearForm });

const formCreate = designer.formCreate;

const rule = ref([]);
const options = ref({});
const formData = ref({});

function setFormCreate(optionsJson, ruleJson, formDataJson?) {
  rule.value = isTools.isNull(ruleJson) ? [] : formCreate.parseJson(ruleJson);
  options.value = isTools.isNull(optionsJson)
    ? {}
    : formCreate.parseJson(optionsJson);
  formData.value = formDataJson;
}

function getFormData() {
  return formData.value;
}

const formCreateRef = ref();

function clearForm() {
  rule.value = [];
  options.value = {};
  formData.value = {};
}
</script>

<template>
  <form-create
    ref="formCreateRef"
    v-model="formData"
    :rule="rule"
    :option="options"
  ></form-create>
</template>

<style scoped lang="scss">
:deep(.el-container > .el-main > a) {
  z-index: -1 !important;
}
</style>
